<template>
  <section class="tools-lib-box">
    <nav class="left-menu">
      <el-menu :default-active="activeMenuIndex" :collapse="false" @select="handleToolsLibChange">
        <el-menu-item v-for="item in menuList" :key="item.value" :index="item.value">{{ item.title }}</el-menu-item>

      </el-menu>
      <div class="macId-wrapper">
        <template>
          <p class="macId-title">所属项目:</p>
          <p class="macId-value"> {{ getProjectName(selectedRow.cardType) }}</p>
        </template>
        <template v-if="macId">
          <p class="macId-title">机器编号:</p>
          <p class="macId-value">{{ macId }}</p>
        </template>
      </div>
    </nav>
    <div class="right-content">
      <keep-alive>
        <component :is="comName" :selectedRow="selectedRow"></component>
      </keep-alive>
    </div>
  </section>
</template>

<script>
import { getStudentInfo, getProjectList } from "@/api";
export default {
  name: "ToolsLib",
  components: {
    Disc: () => import("./Disc.vue"),
    CareerAssessment: () => import("./CareerAssessment.vue"),
    CareerReport: () => import("./CareerReport.vue"),
    ResumeDiagnosis: () => import("./ResumeDiagnosis.vue"),
    AIinterview: () => import("./AIinterview.vue"),
    CareerPathReport: () => import("./CareerPathReport.vue"),
    CompetitiveAnalysis: () => import("./CompetitiveAnalysis.vue"),
  },
  props: {
    selectedRow: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    selectedRow: {
      handler(val) {
        if (val?.cardType == 1) {
          this.menuList = this.ShenZhiDaTaskList;
        } else {
          this.menuList = this.normalTaskList;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  async created() {
    this.getStudentInfo();

    await this.getProjectListFn();
  },
  data() {
    return {
      projectList: [],
      macId: "", //用户的设备id,从就业机扫码跳转到小程序的用户会有
      comName: "Disc",
      activeMenuIndex: "1",
      menuList: [],
      normalTaskList: [
        { title: "性格测评", value: "1" },
        { title: "职业测评", value: "2" },
        { title: "职业报告", value: "3" },
        { title: "简历诊断", value: "4" },
        { title: "AI面评", value: "5" },
        { title: "职途报告", value: "6" },
      ],
      // 深职大任务列表
      ShenZhiDaTaskList: [
        { title: "性格测评", value: "1" },
        { title: "职业测评", value: "2" },
        { title: "职业报告", value: "3" },
        { title: "简历诊断", value: "4" },
        { title: "竞争力分析", value: "7" },
        { title: "职途报告", value: "6" },
      ],
    };
  },
  methods: {
    async getProjectListFn() {
      getProjectList().then((res) => {
        if (res.code == 200) {
          this.projectList = res.data;
        }
      });
    },
    getProjectName(cardType) {
      const temp = this.projectList.find((item) => item.cardType == cardType);
      if (temp) {
        return temp.cardName;
      } else {
        return "未知应用方";
      }
    },
    async getStudentInfo() {
      const res = await getStudentInfo({
        personId: this.selectedRow.personId,
      });
      if (res.code == 200) {
        if (res.data.info) {
          const info = res.data.info;
          if (info.macId) {
            this.macId = info.macId;
          }
        }
      }
    },
    handleToolsLibChange(val) {
      this.activeMenuIndex = val;
      switch (val) {
        case "1":
          this.comName = "Disc";
          break;
        case "2":
          this.comName = "CareerAssessment";
          break;
        case "3":
          this.comName = "CareerReport";
          break;
        case "4":
          this.comName = "ResumeDiagnosis";
          break;
        case "5":
          this.comName = "AIinterview";
          break;
        case "6":
          this.comName = "CareerPathReport";
          break;
        case "7":
          this.comName = "CompetitiveAnalysis";
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tools-lib-box {
  width: 100%;
  display: flex;
  padding-top: 12px;
  .left-menu {
    position: relative;
    flex-basis: 145px;
    background: #f0f2f5;
  }
  .right-content {
    flex-grow: 1;
    padding: 0 0px 17px 21px;
  }
}
::v-deep .el-menu {
  width: 145px;
  border-right: 0px;
  background: #f0f2f5;
}
.macId-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  padding-left: 16px;
  padding-bottom: 16px;
  .macId-title {
    margin-bottom: 4px;
    color: #8892a6;
  }
  .macId-value {
    color: #333;
    margin-bottom: 20px;
  }
}
::v-deep .el-menu-item {
  position: relative;
  padding-left: 26px !important;
  padding: 0;
  min-width: 145px;
  height: 41px;
  line-height: 41px;
  color: #8892a6;
  // overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}

::v-deep .el-menu-item.is-active {
  color: #fff;
  padding-left: 9px !important;
  margin-left: 12px;
  background: #7052ff;
  border-radius: 8px;
  min-width: 133px;
  font-weight: 400;
  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 41px;
    background: #7052ff;
    position: absolute;
    left: -12px;
    border-radius: 8px;
    z-index: 100;
  }
}
</style>
